<template style="margin-left: 300px;">
		
		<div class="pay-seting-main">
		
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm pay-seting" >
			
		  <el-form-item label="支付名称" prop="name" label-width="200px">
			<el-input v-model="ruleForm.name" style="margin-right:10px"></el-input>
			<span style="color:rgb(72, 126, 246);font-size:14px">例：小程序微信支付</span>
			
		  </el-form-item>
		  
	      <el-form-item label="支付类型" prop="style" label-width="200px">
	            <el-radio-group v-model="ruleForm.style" >
	                <el-radio label="有条码" ></el-radio>
	                <el-radio label="无条码"></el-radio>
	            </el-radio-group>
	            <span style="color:rgb(72, 126, 246);font-size:14px;float:right">支付方式保存完成后不可修改，请谨慎操作！</span>
	      </el-form-item>	  
		  
		  <el-form-item label="商户名称" prop="date1" label-width="200px">
		  		<el-input v-model="ruleForm.date1" style="margin-right:10px"></el-input>
				
				
		  </el-form-item>
		  
		  <el-form-item label="商户号" prop="date2" label-width="200px">
		  		<el-input v-model="ruleForm.date2" style="margin-right:10px"></el-input>
				
			
		  </el-form-item>
		
		  <el-form-item label="公众账号ID（Appid）" prop="desc" label-width="200px">
		  		<el-input v-model="ruleForm.desc" style="margin-right:10px"></el-input>
				
			
		  </el-form-item>
	      <el-form-item label="API密钥" prop="region" label-width="200px">
		  		<el-input v-model="ruleForm.region" style="margin-right:10px"></el-input>
				
			
		  </el-form-item>
	      <el-form-item label="接口Secret" prop="jk" label-width="200px">
		  		<el-input v-model="ruleForm.jk" style="margin-right:10px"></el-input>
				
			
		  </el-form-item>
	      <el-form-item label="商户证书" prop="zs" label-width="200px" style="display:relative">
				<label for="upload" style="cursor:pointer"><el-button type="primary" size="medium" style="pointer-events: none;">选择上传文件<i class="el-icon-upload el-icon--left"></i></el-button></label>
	            <input type="file" id="upload" style="display:none" @change="getFileName"/>
		  </el-form-item>
	      <el-form-item label="商户key证书" prop="zs" label-width="200px">
				<span v-model="ruleForm.filename" style="margin-right:100px;color:rgb(72, 126, 246)">{{this.ruleForm.filename}}</span>
	            <el-button type="danger" size="medium" v-if="ruleForm.filename != ''" @click="del">删除<i class="el-icon-delete el-icon--left"></i></el-button>
			
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" icon="el-icon-check" style="width: 100px;height: 40px;margin-left: 150px; margin-top: 20px;">提交</el-button>
		  </el-form-item>
		</el-form>
		
		</div>
</template>

<script>
	 export default {
	    data() {
	      return {
	        ruleForm: {
	          name: '',
	          region: '',
	          date1: '',
	          date2: '',
	          desc: '',
	          style: '',
	          zs: '',
			  jk:'',
	          filename:''
	        },
	        rules: {
	          name: [
	            { required: true, message: '请输入支付名称'}
	          ],
	          region: [
	            { required: true, message: '请输入API密钥' }
	          ],
	          date1: [
	            {required: true, message: '请输入商户名称'}
	          ],
	          date2: [
	            { required: true, message: '请输入商户号'}
	          ],
	          desc: [
	            { required: true, message: '请输入公众账号ID'}
	          ],
	          jk: [
	            { required: true, message: '请输入接口Secret'}
	          ],
	          style:[
	            { required: true }
	          ],
	          zs:[
	            { required: true }
	          ],
	        }
	      };
	    },
	    updated(){
	        
	    },
	    methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            alert('submit!');
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      },
	      getFileName(e){
	          this.ruleForm.filename = e.target.value.split("\\").pop();
	      },
	      del(){
	          document.getElementById('upload').value = '';
	          this.ruleForm.filename = '';
	      }
	    }
	  }
</script>

<style>
	main::-webkit-scrollbar{
		display: none;
	}
	.pay-seting-main{
			width: 100%;
			/* height: 100%; */
			display: flex;
			/* align-items: center; */
			justify-content: center;
			/* min-height: 100vh; */
			background-color: #fff;
			margin: 30px 0;
		}
		.pay-seting{
			margin-top: 80px;
			width: 790px;
		}
		.pay-seting .el-input{
			width: 300px;
		}
</style>
